<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title th:text="${course.couName} + ' - 新建章节 - 企业培训平台'">新建章节 - 企业培训平台</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        /* 可以为表单添加一些简单的样式 */
        .form-container { /* 添加一个容器来包裹表单 */
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            max-width: 800px; /* 限制表单最大宽度 */
            margin: 20px auto; /* 居中并添加上下边距 */
        }

        .form-group {
            margin-bottom: 1rem; /* 使用 rem 单位 */
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem; /* 使用 rem 单位 */
            font-weight: bold;
            color: #495057;
        }

        .form-group input[type="text"],
        .form-group input[type="number"],
        .form-group input[type="file"], /* 添加文件输入框样式 */
        .form-group textarea {
            width: 100%;
            padding: 0.5rem 0.75rem; /* 使用 rem 单位 */
            font-size: 1rem;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: 0.25rem; /* 使用 rem 单位 */
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        .form-group input[type="text"]:focus,
        .form-group input[type="number"]:focus,
        .form-group input[type="file"]:focus, /* 添加文件输入框焦点样式 */
        .form-group textarea:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .form-actions {
            margin-top: 1.5rem; /* 使用 rem 单位 */
            text-align: right; /* 按钮靠右 */
        }

        .form-actions button,
        .form-actions a {
            margin-left: 0.5rem; /* 使用 rem 单位 */
            margin-right: 0; /* 移除右侧边距 */
        }
    </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>

<div class="main-content">
    <div class="container">
        <h1 class="page-title" th:text="${course.couName} + ' - 新建章节'">新建章节</h1>

        <div th:if="${errorMessage}" class="alert alert-danger">
            <p th:text="${errorMessage}"></p>
        </div>
        <div th:if="${successMessage}" class="alert alert-success">
            <p th:text="${successMessage}"></p>
        </div>

        <div class="form-container">
            <form th:action="@{/chapter/create}" th:object="${chapter}" method="post" enctype="multipart/form-data">
                <input type="hidden" th:field="*{couId}">

                <div class="form-group">
                    <label for="chapterName">章节名称:</label>
                    <input type="text" id="chapterName" th:field="*{chapterName}" required>
                </div>

                <div class="form-group">
                    <label for="videoFile">上传视频文件 (可选):</label>
                    <input type="file" id="videoFile" name="videoFile" accept="video/*">
                    <small class="form-text text-muted">支持 mp4, avi 等视频格式。</small>
                </div>

                <div class="form-group">
                    <label for="chapterUrl">章节地址 (外部URL，如果未上传文件):</label>
                    <input type="text" id="chapterUrl" th:field="*{chapterUrl}" placeholder="例如: https://www.youtube.com/watch?v=abcxyz" >
                    <small class="form-text text-muted">如果上传了视频文件，此字段将被忽略。</small>
                </div>


                <div class="form-group">
                    <label for="chapterDuration">章节时长 (秒):</label>
                    <input type="number" id="chapterDuration" th:field="*{chapterDuration}" min="0" placeholder="例如：3600">
                </div>

                <div class="form-group">
                    <label for="chapterOrder">排列序号:</label>
                    <input type="number" id="chapterOrder" th:field="*{chapterOrder}" required readonly title="章节序号自动生成">
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">保存章节</button>
                    <a th:href="@{/chapter/manage/{courseId}(courseId=${chapter.couId})}" class="btn btn-secondary">取消</a>
                </div>

            </form>
        </div>
    </div>
</div>
</body>
</html>